<template>
	<view class="">
		<u-toast ref="uToast" />
		<!-- 导航栏 -->
		<view class="">
			<u-navbar :is-back="false" title="">
				<view class="slot-wrap">
					<u-icon name="arrow-leftward" :size="45" class="u-m-r-30" @click="goBack" ></u-icon>
					<u-input type="text" class="search" v-model="value"/>
					<u-button type="primary" :plain="true" :ripple="true" shape="square" @click="search()">搜索</u-button>
				</view>
			</u-navbar>
		</view>
		<!-- 搜索列表 -->
		<view class="" v-if="song_list.length!=1 && value!=''">
			<view v-for="(item,index) in song_list" :key="index" @click="show_music(item.id)"
				:class="(index == 0)?'u-p-t-20 u-font-25 list gray':'u-p-t-20 u-font-25 list'">
				<u-row>
					<u-col :span="4" text-align="center">
						<view class="text_is_beyond">
							{{item.name}}
						</view>
					</u-col>
					<u-col :span="3" text-align="center">
						<view class="text_is_beyond">
							<text v-for="(value,indexs) in item.singer" :key="indexs">
								{{value}}<text v-if="item.singer.length-1 != indexs">\</text>
							</text>
						</view>
					</u-col>
					<u-col :span="3" text-align="center">
						<view class="text_is_beyond">
							{{item.album}}
						</view>
					</u-col>
					<u-col :span="2" text-align="center">{{item.time}}</u-col>
				</u-row>
				<view class="u-font-22 u-light-color u-p-10">{{item.alia}}</view>
			</view>
		</view>
		<!-- 底部播放 -->
		<play class="play" :id='musicId'></play>
	</view>
</template>

<script>
	import play from '../../components/play_music/play.vue'
	export default {
		components: {
			play
		},
		data() {
			return {
				song_list: [{
					name: "音乐标题",
					alia: "",
					singer: ["歌手"],
					album: "专辑",
					time: "时长"
				}],
				value:"",
				musicId:0
				
			}
		},
		methods:{
			show_music(iss){
				this.musicId = iss;
			},
			search(){
				if(this.value == ""){
					this.$refs.uToast.show({
						title: '请输入查询的歌名',
						// 如果不传此type参数，默认为default，也可以手动写上 type: 'default'
						type: 'warning' 
						// 如果不需要图标，请设置为false
						// icon: false
					})
				}else{
					uni.request({
						url: "https://www.codeman.ink/api/cloudsearch",
						data: {
							keywords: this.value
						},
						method: 'GET',
						fail:(res) => {
							this.$refs.uToast.show({
								type:"error",
								title:"请输入正确的歌名"
							})
						},
						success: (res) => {
							// console.log(res.data);					
							res.data.result.songs.forEach((value, index) => {
								let songs = {};
								songs.id = value.id;
								// 歌曲
								songs.name = value.name;
								songs.singer = [];
								// 获取歌手名称
								value.ar.forEach((item, indexs) => {
									songs.singer.push(item.name);
								});
								// 标题补充
								value.alia.forEach((item, indexs) => {
									songs.alia = item;
								});
					
								// 专辑
								songs.album = value.al.name;
								//时长
								songs.time = parseInt(value.dt / 1000);
								if (songs.time < 60) {
									songs.time = "00:" + songs.time;
								} else {
									let minutes = parseInt(songs.time / 60);
									minutes = minutes < 10 ? "0" + minutes : minutes;
									if(songs.time - minutes * 60 < 10){
										songs.time = minutes + ":" + "0" + (songs.time - minutes * 60);
									}else{
										songs.time = minutes + ":" + (songs.time - minutes * 60);
									}
								}
								this.song_list.push(songs);
								// console.log(this.song_list);
							})
						}
					})
				}
			}
		},
		onLoad() {

		}
	}
</script>

<style scoped lang="scss">
	.slot-wrap {
		display: flex;
		align-items: center;
		/* 如果您想让slot内容占满整个导航栏的宽度 */
		flex: 1;
		/* 如果您想让slot内容与导航栏左右有空隙 */
		padding: 0 30rpx;
	}

	.text_is_beyond {
		// max-height: 130upx;
		overflow: hidden;
		word-break: break-all;
		/* break-all(允许在单词内换行。) */
		text-overflow: ellipsis;
		/* 超出部分省略号 */
		display: -webkit-box;
		/** 对象作为伸缩盒子模型显示 **/
		-webkit-box-orient: vertical;
		/** 设置或检索伸缩盒对象的子元素的排列方式 **/
		-webkit-line-clamp: 1;
		/** 显示的行数 **/
	}
	.play {
		width: 100%;
		bottom: 0upx;
		padding: 20upx;
		position: fixed;
		background: #FFFFFF;
		transform: translateZ(0);
		bottom: env(safe-area-inset-bottom);
		box-shadow: 0rpx -5rpx 14rpx #e3e6e6;
		bottom: constant(safe-area-inset-bottom);
		
	}
	.list{
		border: 1rpx solid #999999;
	}
	.gray{
		background-color: pink;
	}
</style>
